// 导入 react 和 react-dom
import React from 'react';
// React18 写法，多了 /client
import ReactDOM from 'react-dom/client';

// 创建元素(虚拟DOM)
// React.createElement('标签名', 标签属性, 标签内容)
// const title = React.createElement('h1', null, 'hello react') // <h1>hello react</h1>
const title = <h1>hello react</h1>;

// 标签的 class 属性需要写成  className
// const divNode = React.createElement(
//   'div',
//   { id: 'box', className: 'demo' },
//   '这是一个react案例',
// )
const divNode = (
  <div id='box' className='demo'>
    这是一个react案例
  </div>
);

// const list = React.createElement(
//   'ul',
//   { className: 'list' },
//   React.createElement('li', null, '香蕉'),
//   React.createElement('li', null, '橘子'),
//   React.createElement('li', null, '苹果'),
// )
const list = (
  <ul className='list'>
    <li>香蕉</li>
    <li>橘子</li>
    <li>苹果</li>
    <li>荔枝</li>
  </ul>
);

// React.createElement('div', null, title, divNode, list);
const app = (
  <>
    {title}
    {divNode}
    {list}
  </>
);

// 渲染react元素，React18写法，先创建跟节点，再渲染
ReactDOM.createRoot(document.getElementById('root')).render(app);
